<template>
	<view>
		<view class="aa">
		<scroll-view :style="'height:'+boxHeight+'px'" class="box" scroll-y="true" >
				<view :style="'height:'+box2Height+'px;'" @click="dianji(item.id,index)" :class="indexaa==index?'red':'null'" v-for="(item,index) in imgtext " :key="index">
					{{item.title}}
				</view>
		</scroll-view>
		
		<scroll-view :style="'height:'+boxHeight+'px'" class="box2" scroll-y="true" >
		<view class="count">
			<view v-if="istrue">
				暂无数据
			</view>
			<view v-for="(item,index) in arr " :key="index">
					<image src="../../static/logo.png" mode=""></image>
					<view class="">
						{{item.title}}
					</view>
					<view class="">
						{{item.zhaiyao}}
					</view>
			</view>
			
		</view>
		</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		
		data() {
			return {
				indexaa:0,
				imgtext:[],
				arr:[],
				istrue:false,
				boxHeight:0,
				box2Height:0
			}
		},
		async onLoad() {
			uni.request({
				url:`http://localhost:8082/api/getimgcategory`,
				method:'GET',
				success: (data) => {
					this.imgtext=data.data.message
					this.istrue = true
					const that=this
					uni.getSystemInfo({
						success(res) {
							console.log(res.screenHeight)
							console.log(that)
							that.boxHeight=res.screenHeight
							that.box2Height = res.screenHeight/data.data.message.length
							console.log(that.box2Height)
						}
					})
				}
			})
		},
		methods: {
			dianji(id,index){
				this.indexaa=index
				uni.request({
					url:`http://localhost:8082/api/getimages/${id}`,
					method:'GET',
					success: (data) => {
						this.arr=data.data.message
						if(data.data.message.length==0){
							this.istrue = true
						}else{
							this.istrue = false
						}
					}
				})
			}
		}
		
	}
</script>

<style>
.box{
	width: 120px;
	border-right: solid 1px #ccc;
	border-left: solid 1px #ccc;
}
.box2{
	width: 100%;
}
.box view{
	width: 100%;
	/* height: 50px; */
	text-align: center;
	line-height:60px;
	border-bottom: solid 1px #ccc;
}
.count{
	width: 100%;
	height: 400px;
	/* border: solid 1px red; */
}
.aa{
	display: flex;
}
image{
	width: 100%;
	height: 150px;
}
.red{
	background-color: #B50E03;
	color: white;
}
.null{
	background-color: white;
}
</style>
